<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>产品管理</title>
	<!-- 引入jquery -->
	<script src="../day01/jquery.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
	<style>
		/* 初始化table样式 */
		table,th,td{
			border: 1px solid #ccc;
			border-collapse: collapse;
			text-align: center;
			line-height: 30px;
			width: 1200px;
			margin-top: 10px;
		}
		/* 初始化模态框遮罩样式 */
		.dialog{
			width: 100%;
			height: 100vh;
			background-color: rgba(0,0,0,0.5);
			position: absolute;
			top: 0;
			left: 0;
			line-height: 40px;
			/* 隐藏模态框 */
			display: none;
		}
		/* 初始化模态框样式 */
		.dialog .container{
			font-size: 18px;
			width: 60%;
			height: 400px;
			margin: calc((100vh - 400px)/2) auto;
			background-color: #fff;
		}
		.dialog .container .dialog_header{
			background-color: red;
		}
		.dialog .container .dialog_footer button{
			position: relative;
			left: 350px;
			display: inline-block;
			width: 50px;
		}
	</style>
	<script>
		$(function(){
			// 声明全局ajax请求基础路径
			var baseURL="http://47.111.2.73:8002";
			// 登录按钮:点击登录 获取token 存储起来 配置到ajax全局对象
			// 声明全局user
			var user=null;
			$('.login').click(function(){
				var obj={
					username:"admin1",
					password:123321
				};
				// 发送登录请求
				$.ajax({
					// 请求路径
					url:baseURL+'/user/login',
					// 请求方式
					method:"post",
					// 请求头
					headers:{
						"Content-Type":"application/json"
					},
					// 携带参数
					data:JSON.stringify(obj),
					// 成功回调
					success(res){
						console.log(res);
						// 存储token
						sessionStorage.setItem('token',res.data.token);
						// 全局配置ajax请求 全部携带token
						$.ajaxSetup({
							headers:{
								"Authorization":sessionStorage.getItem('token')
							}
						});
						$('.load').trigger('click');
						// $('.load').trigger('click')
					},
					// 失败回调
					error(err){
					}
				})
			})

			// 加载按钮 将所有产品信息展示到表格中
			// 1.获取产品信息 插入到tbody中
			// 声明成全局变量
			var obj={
					page:1,
					pageSize:20
				}
			$('.load').click(function(){
				// 提供清空某一个元素内容方法 empty()
				$('tbody').empty();
				$.ajax({
					url:baseURL+"/product/pageQuery",
					method:"get",
					data:Qs.stringify(obj),
					success(res){
						// console.log(res.data.list);
						// 遍历数组 动态生成tr 插入到tbody中
						res.data.list.forEach(function(item,index){
							var newTr=`
								<tr>
									<td>${index+1}</td>	
									<td>${item.id}</td>	
									<td>${item.name}</td>	
									<td>${item.price}</td>	
									<td>${item.status}</td>	
									<td>${item.category.name}</td>	
									<td><button class='toDelete' id='${item.id}'>删除</button><button>修改</button></td>	
								</tr>
							`
							$('tbody').append(newTr)
						})
					},
					error(err){

					}
				})

			})

			// var name='zhangsan';
			// console.log('hello name');
			// // 模板字符串
			// console.log(`hello${name}`);

			// 删除按钮事件 事件代理 
			$('table tbody').on('click','.toDelete',function(){
				var id=$(this).attr('id');
				// console.log(id);
				// 发送一个删除请求 根据id删除当前行的数据
				var result=confirm('确定删除吗?');
				if(result){
					// 点击确定 继续删除 继续发送删除请求
					$.ajax({
						url:baseURL+"/product/deleteById",
						method:"get",
						// 第一个id是后端需要的参数 id
						// 第二个id是自己点击按钮获取得变量id
						data:{id:id},
						success(res){
							console.log(res);
							// 提示用户 删除成功
							alert(res.message)
							// 刷新页面 
							$('.load').trigger('click');
						},
						error(err){

						}
					})
				}else{
					$('confirm').fadeOut()
				}
			})
			// $('.toDelete').click(function(){
			// 	var id=$(this).attr('id');
			// 	console.log(id);
			// })
			// 解决页面刷新数据丢失问题
			var token=sessionStorage.getItem('token');
			if(token){
				$.ajaxSetup({
					headers:{
						'Authorization':token
					}
				})
				// 模拟点击加载数据
				$('.load').trigger('click')
			}else{
				// 假设token失效 
				$('.login').trigger('click');
				
			}

			// 给查询按钮绑定事件 点击查询 按照name查询
			$('.toSearch').click(function(){
				$('tbody').empty();
				// page pageSize name
				let temp={
					...obj,
					name:$('input:first').val(),
					status:$('select:first').val(),
				};
				$.ajax({
					url:baseURL+"/product/pageQuery",
					method:"get",
					data:Qs.stringify(temp),
					success(res){
						res.data.list.forEach(function(item,index){
							var newTr=`
								<tr>
									<td>${index+1}</td>	
									<td>${item.id}</td>	
									<td>${item.name}</td>	
									<td>${item.price}</td>	
									<td>${item.status}</td>	
									<td>${item.category.name}</td>	
									<td><button class='toDelete' id='${item.id}'>删除</button><button item='${JSON.stringify(item)}' class='toEdit'>修改</button></td>	
								</tr>
							`
							$('tbody').append(newTr)
						})
					},
				})
			})

			// var obj={
			// 	name:'zhangsan',
			// 	age:12
			// };
			// console.log({...obj});


				// 给确定按钮绑定事件 
				// 1.获取用户输入的内容
				// 2.发送保存请求 将数据插入到数据库中
				// 3.提示用户保存成功 关闭模态框 刷新页面
				$('.submit').click(function(){
					// 获取用户输入得内容
					var name=$('input[name=name]').val();
					var status=$('input[type=radio]:checked').val();
					var price=$('input[name=price]').val();
					var description=$('textarea[name=description]').val()
					console.log(name,status,price,description);
					// 发送保存请求
					$.ajax({
						url:baseURL+"/product/saveOrUpdate",
						method:"post",
						// 前一个name是后端需要的参数
						// 后一个name是用户输入的值
						data:{
							// name:name,
							// status:status,
							// price:price,
							// description:description
							// es6对象属性简写形式 属性名和变量名重名 可以简写为属性名
							id:user?user.id:"",
							name,
							status,
							price,
							description,
							productCategoryId:9441
						},
						success(res){
							console.log(res);
							// 保存成功
							// 1.关闭模态框
							$('.dialog').fadeOut();
							// 2.提示用户保存成功
							alert(res.message);
							// 3.刷新页面 局部数据刷新
							// location.reload()
							$('.load').trigger('click');

						},
						error(err){

						}
					})
				})
				// 给新增按钮绑定事件
			$('.toAdd').click(function(){
				// 模态框显示
				$('.dialog').fadeIn();
				// 清空表单数据
				$('input[name=name]').val("");
				$('input[type=radio]').prop("checked",false);
				$('input[name=price]').val("");
				$('textarea[name=description]').val("");
			});
			$('.dialog_header').html("新增产品信息")
			// 给取消按钮绑定事件
			$('.cancel').click(function(){
				// 模态框隐藏
				$('.dialog').fadeOut()
			})



			// 修改按钮绑定事件
			$('table tbody').on('click','toEdit',function () {
				// 1.弹出模态框
				$('.dialog').fadeIn()
				// 2.点击哪一行修改按钮 修改哪一行
				user=$(this).attr('item');
				user=JSON.parse(user)
				// 3.将当前行数据设置给表单信息
				$('input[name=name]').val(user.name);
				$('input[type=radio][value='+user.status+']').prop("checked",true);
				$('input[name=price]').val(user.price);
				$('textarea[name=description]').val(user.description);
				// 4.修改模态框标题为修改产品信息
				$('.dialog_header').html
				$(this).attr()
			})






		})
	</script>
</head>
<body>
	<!-- 按钮操作 -->
	<button class="login">登录</button>
	<button class="load">加载数据</button>
	<input type="text">
	<select name="status" >
		<option value="正常">正常</option>
		<option value="下架">下架</option>
	</select>
	<button class="toSearch">查询</button>
	<button class="toAdd">新增</button>
	<!-- 表格展示数据 -->
	<table>
		<thead>
			<tr>
				<th>序号</th>
				<th>产品编号</th>
				<th>名称</th>
				<th>价格</th>
				<th>状态</th>
				<th>所属栏目</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>

		</tbody>
	</table>
	<!-- 模态框  -->
	<div class="dialog">
		<div class="container">
			<!-- 头部 -->
			<div class="dialog_header">
				新增产品信息
			</div>
			<!-- 体部 -->
			<div class="dialog_center">
				<!-- 表单控件 -->
				<!-- 保存或者更新 
				name 
				price 
				status
				sescription -->
				<div>
					产品名称: <input type="text" name="name" >
				</div>
				<div>
					状态: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正常<input type="radio" name="status" value="正常">
					 下架<input type="radio" name="status" value="下架">
				</div>
				<div>
					价格: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="price" id="">
				</div>
				<div>
					产品描述: <textarea name="description"  cols="30" rows="10"></textarea>
				</div>
			</div>
			<!-- 尾部 -->
			<div class="dialog_footer">
				<button class="cancel">取消</button>
				<button class="submit">确定</button>
			</div>
		</div>
	</div>
</body>
</html>